<template>
  <div>
    <ul class="catesul">
      <li
        v-for="cate in cates"
        :key="cate.id"
        @click="$router.push({ path: '/itemList', query: { cateId: cate.id } })"
      >
        <div><img v-lazy="cate.icon" /></div>
        <p>{{ cate.name }}</p>
      </li>
      <li @click="$router.push('/cate')"><div><img src="../../../assets/img/more.png" /></div> <p>查看更多</p></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['cates']
}
</script>

<style lang="scss" scoped>
.catesul {
  width: 100%;
  background: #fff;
  border-radius: 0.2rem;
  font-size: 14px;
  padding: 0.2rem 0 0;
  li {
    width: 20%;
    text-align: center;
    display: inline-block;
    img {
      border-radius: 100%;
      width: 40%;
    }
    p {
      line-height: 0.34rem;
      font-size: 0.24rem;
      margin: 0.1rem 0 0.2rem;
    }
  }
}
</style>
